<template>
  <div class="wrapper">
    <div class="innerWrapper">
      <div class="content">
        <div class="title">
          <span>添加评论</span>
        </div>
        <div class="score">
          <span>评分：</span>
          <el-rate class="elRate" :disabled="submitLoading" v-model="score" :colors="colors"/>
        </div>
        <div class="input">
          <el-input class="myInput" :disabled="submitLoading" v-model="content" placeholder="评论信息"/>
        </div>
        <div class="button">
          <xum-button :disabled="submitLoading" @click="handleSubmit"
                      style="width: 110px; height: 40px;">提交</xum-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XumButton from '@/components/general/XumButton'
import { addReview } from '@/api/ApiSimpleReview'
import SimpleReviewInsertDTO from '@/api/entity/SimpleReviewInsertDTO'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'AddReviewBox',
  components: { XumButton },
  props: {
    goodId: {
      required: true,
      type: [Number, String]
    }
  },
  data () {
    return {
      submitLoading: false,
      score: 3,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      content: ''
    }
  },
  computed: {
    trueScore () {
      return this.score && this.score >= 0 ? this.score * 2 : 6
    }
  },
  methods: {
    resetData () {
      this.score = 3
      this.content = ''
    },
    handleSubmit () {
      if (!(this.content && this.content.length > 0)) {
        this.$message.error('评论内容不能为空')
        return
      }
      this.submitLoading = true
      const params = SimpleReviewInsertDTO.instance()
      params.setId(this.goodId)
      params.setContent(this.content)
      params.setScore(this.trueScore)
      addReview(params, data => {
        if (data && data.code === ResultCode.OK) {
          this.resetData()
          this.$message.success('评论成功')
          this.$emit('success', params)
        }
      }, () => {
        this.submitLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper{
    padding: 20px 30px;

    .innerWrapper{
      border: 2px solid #333333;
      width: 100%;
      height: 260px;
      text-align: center;
      padding: 30px 60px;

      .content{
        width: 100%;
        height: 100%;

        .title{
          text-align: left;
          font-weight: 700;
          text-transform: capitalize;
          font-size: 20px;
        }

        .score{
          text-align: left;
          margin-top: 24px;
          font-size: 18px;

          .elRate{
            display: inline-block;
            margin-left: 16px;
          }
        }

        .input{
          margin-top: 16px;
        }

        .button{
          margin-top: 20px;
          text-align: left;
        }

      }

    }
  }
</style>
